<!--
 * @Description: 功能权限导入错误信息提示
 * @Version: 1.0
 * @Autor: gao_fm
-->
<template>
  <div
    v-if="visible"
    class="menu-confirm-dialog-wrapper"
  >
    <div class="menu-confirm-dialog-box">
      <div class="confirm-container">
        <div class="confirm-success-title">
          <span v-if="!funErrorFlag">{{ LANG.PART_BUTTON_IMPORT_ERROR_TIP }}</span>
          <span v-else>{{ LANG.BUTTON_IMPORT_ERROR_TIP }}</span>
        </div>
        <fks-table
          ref="tree"
          class="menu-table"
          :data="funErrorData"
          row-key="code"
          default-expand-all
          :tree-props="{ children: 'children' }"
          height="calc(100% - 78px)"
        >
          <fks-table-column
            :label="LANG.NAME"
            prop="name"
            header-align="center"
            min-width="200px"
            align="left"
          />
          <fks-table-column
            :label="LANG.IMPORT_STATUS"
            prop="title"
            header-align="center"
            align="left"
          >
            <template #default="scope">
              <div>
                <fks-tag
                  v-if="!scope.row.importErrorMsg"
                  type="success"
                >
                  {{ LANG.SUCCESS }}
                </fks-tag>

                <fks-tag
                  v-if="scope.row.importErrorMsg"
                  type="danger"
                >
                  {{ LANG.FAILED }}
                </fks-tag>
              </div>
            </template>
          </fks-table-column>
          <fks-table-column
            :label="LANG.ERROR_INFO"
            prop="title"
            header-align="center"
            min-width="200px"
            align="left"
          >
            <template #default="scope">
              {{ scope.row.importErrorMsg }}
            </template>
          </fks-table-column>
        </fks-table>
        <div class="confirm-record-button">
          <fks-button
            primary
            @click="checkPwd"
          >
            {{ LANG.KNOWN }}
          </fks-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ImportErrorTip',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    funErrorData: {
      type: Array,
      default: []
    },
    funErrorFlag: {
      type: Boolean,
      default: false
    }
  },
  methods:{
    checkPwd(){
      this.$emit('update:visible', false)
    }
  }
}

</script>
<style lang="scss" scoped>
.menu-confirm-dialog-wrapper {
  z-index: 110000 !important;
  position: fixed !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  margin: 0;
  background: rgba(#000, 0.12);
}

.menu-confirm-dialog-box {
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  position: fixed;
  top: calc(50vh);
  left: calc(50vw);
  text-align: center;
  min-width: 474px;
  min-height: 344px;
  background: #ffffff;
  box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.12);
  border-radius: 16px;

  .confirm-container {
    position: relative;
    margin: 24px 24px;
    height: 400px;
  }
}

.confirm-success-title {
  height: 20px;
  font-weight: bold;
  font-size: 16px;
  color: #191919;
  font-family: PingFangSC-Medium, PingFang SC;
  line-height: 20px;
  text-align: center;
  margin-bottom: 12px;

  i {
    color: #40bb5a;
    margin-right: 8px;
  }
}

.confirm-record-button {
  margin-top: 16px;
}
</style>
